<xsl:stylesheet version="1.0" exclude-prefixes="xsl" xmlns:x="http://www.xopus.com/xmlns/config" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output encoding="us-ascii" method="html" version="1.0"
        doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"
        doctype-system="http://www.w3.org/TR/html4/loose.dtd" />

  <xsl:param name="q" select="''"/>
  
  <xsl:template match="images">
    <html>
      <head>
        <title>Image Lookup</title>
        <link rel="stylesheet" type="text/css" href="ui/example-app.css"/>
      </head>
      <body class="lookup-ui-dialog">
        <p>Choose an image from the <xsl:choose>
          <xsl:when test="$q = ''"><xsl:text>collection</xsl:text></xsl:when>
          <xsl:otherwise><a href="lookup-images.php">collection</a></xsl:otherwise>
        </xsl:choose>, or 
          <span>
            <form method="get" action="lookup-images.php" class="lookup-ui-form">
              <input type="text" name="q" value="{$q}" onkeyup="this.parentNode.submit();"/>
              <button type="submit">Search</button>
            </form>
          </span> for a specific image.
        </p>
         <ul class="images">
           <xsl:choose>
             <xsl:when test="$q = ''">
               <xsl:apply-templates select="image"/>
             </xsl:when>
             <xsl:otherwise>
               <xsl:apply-templates select="image[contains(.,$q)]"/>
             </xsl:otherwise>
           </xsl:choose>
        </ul>
        <script type="text/javascript" src="ui/example-app.js"> </script>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="image">
    <li class="image">
      <img onclick="lookup.chooseReference('{.}');" src="../images/{.}"/>
    </li>
  </xsl:template>  
</xsl:stylesheet>
